<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .ios-shadow {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .setting-item {
            transition: all 0.3s ease;
        }
        .setting-item:hover {
            background-color: rgba(0,0,0,0.02);
        }
        .toggle {
            position: relative;
            width: 50px;
            height: 28px;
            background-color: #ccc;
            border-radius: 14px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .toggle.active {
            background-color: #007AFF;
        }
        .toggle::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: white;
            top: 2px;
            left: 2px;
            transition: transform 0.3s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .toggle.active::after {
            transform: translateX(22px);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部状态栏 -->
    <div class="bg-white/10 backdrop-blur-md text-white px-4 py-2 flex justify-between items-center">
        <div class="flex items-center space-x-2" onclick="location.href='index.html'">
            <i class="fas fa-arrow-left"></i>
            <span class="text-sm">返回</span>
        </div>
        <div class="text-sm font-medium">设置</div>
        <div class="w-8"></div>
    </div>

    <!-- 设置内容 -->
    <div class="px-4 py-4 pb-20">
        <!-- 游戏设置 -->
        <div class="bg-white/95 backdrop-blur-md rounded-xl ios-shadow mb-4">
            <div class="p-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800">游戏设置</h3>
            </div>
            
            <div class="divide-y divide-gray-200">
                <div class="setting-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-volume-up text-blue-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">音效</div>
                            <div class="text-sm text-gray-600">游戏音效开关</div>
                        </div>
                    </div>
                    <div class="toggle active" onclick="toggleSetting(this)"></div>
                </div>

                <div class="setting-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-music text-green-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">背景音乐</div>
                            <div class="text-sm text-gray-600">背景音乐开关</div>
                        </div>
                    </div>
                    <div class="toggle" onclick="toggleSetting(this)"></div>
                </div>

                <div class="setting-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-vibrate text-purple-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">震动反馈</div>
                            <div class="text-sm text-gray-600">触摸震动反馈</div>
                        </div>
                    </div>
                    <div class="toggle active" onclick="toggleSetting(this)"></div>
                </div>

                <div class="setting-item p-4 flex items-center justify-between" onclick="showDifficultyModal()">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-brain text-orange-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">AI难度</div>
                            <div class="text-sm text-gray-600">当前: 中等</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 显示设置 -->
        <div class="bg-white/95 backdrop-blur-md rounded-xl ios-shadow mb-4">
            <div class="p-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800">显示设置</h3>
            </div>
            
            <div class="divide-y divide-gray-200">
                <div class="setting-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-moon text-yellow-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">深色模式</div>
                            <div class="text-sm text-gray-600">护眼深色主题</div>
                        </div>
                    </div>
                    <div class="toggle" onclick="toggleSetting(this)"></div>
                </div>

                <div class="setting-item p-4 flex items-center justify-between" onclick="showThemeModal()">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-pink-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-palette text-pink-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">棋盘主题</div>
                            <div class="text-sm text-gray-600">当前: 经典木纹</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="setting-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-eye text-red-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">显示坐标</div>
                            <div class="text-sm text-gray-600">显示棋盘坐标</div>
                        </div>
                    </div>
                    <div class="toggle" onclick="toggleSetting(this)"></div>
                </div>
            </div>
        </div>

        <!-- 账户设置 -->
        <div class="bg-white/95 backdrop-blur-md rounded-xl ios-shadow mb-4">
            <div class="p-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800">账户设置</h3>
            </div>
            
            <div class="divide-y divide-gray-200">
                <div class="setting-item p-4 flex items-center justify-between" onclick="location.href='profile.html'">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-user text-blue-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">个人资料</div>
                            <div class="text-sm text-gray-600">编辑个人信息</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="setting-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-shield-alt text-green-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">隐私设置</div>
                            <div class="text-sm text-gray-600">管理隐私选项</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="setting-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-bell text-purple-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">通知设置</div>
                            <div class="text-sm text-gray-600">推送通知管理</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 其他设置 -->
        <div class="bg-white/95 backdrop-blur-md rounded-xl ios-shadow mb-4">
            <div class="p-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800">其他</h3>
            </div>
            
            <div class="divide-y divide-gray-200">
                <div class="setting-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-question-circle text-gray-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">帮助与反馈</div>
                            <div class="text-sm text-gray-600">使用帮助和意见反馈</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="setting-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-info-circle text-blue-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">关于我们</div>
                            <div class="text-sm text-gray-600">版本 1.0.0</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>

                <div class="setting-item p-4 flex items-center justify-between" onclick="clearData()">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-trash text-red-600"></i>
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">清除数据</div>
                            <div class="text-sm text-gray-600">清除所有本地数据</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- AI难度选择弹窗 -->
    <div id="difficultyModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden flex items-center justify-center z-50">
        <div class="bg-white rounded-2xl p-6 mx-4 w-full max-w-sm ios-shadow">
            <h3 class="text-lg font-semibold text-gray-800 mb-4 text-center">选择AI难度</h3>
            
            <div class="space-y-3">
                <div class="difficulty-option p-3 border border-gray-200 rounded-lg cursor-pointer" data-difficulty="easy">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium text-gray-800">简单</div>
                            <div class="text-sm text-gray-600">适合新手练习</div>
                        </div>
                        <div class="w-4 h-4 border-2 border-gray-300 rounded-full"></div>
                    </div>
                </div>
                
                <div class="difficulty-option p-3 border border-blue-500 bg-blue-50 rounded-lg cursor-pointer" data-difficulty="medium">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium text-gray-800">中等</div>
                            <div class="text-sm text-gray-600">平衡的挑战性</div>
                        </div>
                        <div class="w-4 h-4 bg-blue-500 rounded-full"></div>
                    </div>
                </div>
                
                <div class="difficulty-option p-3 border border-gray-200 rounded-lg cursor-pointer" data-difficulty="hard">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-medium text-gray-800">困难</div>
                            <div class="text-sm text-gray-600">高级玩家挑战</div>
                        </div>
                        <div class="w-4 h-4 border-2 border-gray-300 rounded-full"></div>
                    </div>
                </div>
            </div>
            
            <div class="flex space-x-3 mt-6">
                <button onclick="closeDifficultyModal()" class="flex-1 bg-gray-200 text-gray-800 py-3 rounded-xl font-medium">
                    取消
                </button>
                <button onclick="applyDifficulty()" class="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 rounded-xl font-medium">
                    确定
                </button>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-gray-200/50">
        <div class="flex justify-around py-3">
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='index.html'">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </div>
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='game.html'">
                <i class="fas fa-gamepad text-xl mb-1"></i>
                <span class="text-xs">游戏</span>
            </div>
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='profile.html'">
                <i class="fas fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </div>
        </div>
    </div>

    <script>
        // 切换开关
        function toggleSetting(element) {
            element.classList.toggle('active');
        }

        // 显示AI难度选择弹窗
        function showDifficultyModal() {
            document.getElementById('difficultyModal').classList.remove('hidden');
        }

        // 关闭AI难度选择弹窗
        function closeDifficultyModal() {
            document.getElementById('difficultyModal').classList.add('hidden');
        }

        // 应用AI难度设置
        function applyDifficulty() {
            const selected = document.querySelector('.difficulty-option.selected');
            if (selected) {
                const difficulty = selected.dataset.difficulty;
                // 这里可以保存设置
                console.log('设置AI难度为:', difficulty);
            }
            closeDifficultyModal();
        }

        // 显示主题选择弹窗
        function showThemeModal() {
            alert('主题选择功能');
        }

        // 清除数据
        function clearData() {
            if (confirm('确定要清除所有本地数据吗？此操作不可恢复。')) {
                // 清除数据逻辑
                alert('数据已清除');
            }
        }

        // 难度选项点击事件
        document.querySelectorAll('.difficulty-option').forEach(option => {
            option.addEventListener('click', function() {
                // 移除其他选项的选中状态
                document.querySelectorAll('.difficulty-option').forEach(opt => {
                    opt.classList.remove('border-blue-500', 'bg-blue-50', 'selected');
                    opt.classList.add('border-gray-200');
                    const circle = opt.querySelector('.w-4.h-4');
                    circle.classList.remove('bg-blue-500');
                    circle.classList.add('border-2', 'border-gray-300', 'rounded-full');
                });
                
                // 添加当前选项的选中状态
                this.classList.add('border-blue-500', 'bg-blue-50', 'selected');
                this.classList.remove('border-gray-200');
                const circle = this.querySelector('.w-4.h-4');
                circle.classList.add('bg-blue-500');
                circle.classList.remove('border-2', 'border-gray-300');
            });
        });
    </script>
</body>
</html>